const path = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
    // 大家已经学会了举一反4， 大家觉得，在配置文件中，需要手动指定 入口 和 出口
    entry: path.join(__dirname, './srcc/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
    output: { // 输出文件相关的配置
      path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
      filename: 'bundle.js' // 这是指定 输出的文件的名称
    },
    plugins:[// 所有webpack  插件的配置节点
        new VueLoaderPlugin(),
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./srcc/index.html'),// 指定模板文件路径
            filename:'index.html' // 设置生成的内存页面的名称
        })
    ],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},// 处理 CSS 文件的 loader
            {test:/\.(jpg|png|bmp|gif)$/,use:[{
               loader :'url-loader',
               options:{
   // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，
   //则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
                    limit:50*1024,  //小于50k就会转成base64
                        outputPath: 'images'

               }
            }
                
            ]},
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//处理 字体文件的 loader 
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            {test:/\.vue$/,use:'vue-loader'}//处理 .vue文件的loader
        ]
    },
    resolve:{
        alias:{
            "vue$":"vue/dist/vue.js"
        }
    }
}
